import React from 'react';
import { TabBar } from 'antd-mobile';
import { history } from 'umi'

const Routes = [
  {
    icon: 'shouye',
    path: '/home',
    title: '首页',
    selectedTab: 'redTab',
    bgColor: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat',
    selectedBgColor: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
  },
  {
    icon: 'shouye',
    path: '/cart',
    title: '首页',
    selectedTab: 'blueTab',
    bgColor: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat',
    selectedBgColor: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
  },
  {
    icon: 'shouye',
    path: '/orderList',
    title: '首页',
    selectedTab: 'greenTab',
    bgColor: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat',
    selectedBgColor: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
  },
  {
    icon: 'shouye',
    path: '/404',
    title: '404',
    selectedTab: 'yellowTab',
    bgColor: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat',
    selectedBgColor: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
  },
  // {
  //   icon: 'gouwuche',
  //   path: '/cart',
  //   title: '购物车'
  // },
  // {
  //   icon: 'wodedingdan',
  //   path: '/orderList',
  //   title: '订单'
  // },
  // {
  //   icon: 'gerenzhongxin',
  //   path: '/person',
  //   title: '个人中心'
  // }
]

// url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat
interface IState {
  selectedTab?: string,
  hidden?: boolean,
  fullScreen?: boolean,
  history?: any
}

export default class TabBarExample extends React.Component<IState>{
  // constructor(props:IState) {
  //   super(props);
  //   this.state = {
  //     selectedTab: 'redTab',
  //     hidden: false,
  //     fullScreen: false,
  //   };
  // }
  state:IState = {
    selectedTab: 'redTab',
    hidden: false,
    fullScreen: false,
  };
  render() {
    return (
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {
            Routes.map((item:any) => {
              return <TabBar.Item
              title={item.title}
              key={item.title}
              icon={<div style={{
                width: '22px',
                height: '22px',
                background: item.bgColor}}
              />}
              selectedIcon={<div style={{
                width: '22px',
                height: '22px',
                background: item.selectedBgColor}}
              />}
              selected={this.state.selectedTab === item.selectedTab}
              onPress={() => {
                this.setState({
                  selectedTab: item.selectedTab,
                });
                this.props.history.push(item.path)
              }}
              ></TabBar.Item>
            })
          }
        </TabBar>
    );
  }
}